function throttle(func,wait) {
    let content, args, timeout;
    return function () {
        content = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                func.apply(content, args);
                timeout = null
            }, wait);
        }
    }
}
class Rolling{
    constructor(obj) {
        this.el = document.querySelectorAll(obj.el);
        this.value = (obj.value || 0).toString();
        this.string = (obj.string || '0123456789').toString();
        this.duration = obj.duration || 2;
        this.data = [];
        this.count = obj.count || 1;
        this.callback = obj.callback || function (){}
    }
    content(string){
        let str = string.split(''),
            ctx = '';
        for(let i = 0, len = str.length;i < len; i ++){
            ctx += `<div>${str[i]}</div>`
        }
        return ctx;
    }
    style(duration){
        return `float: left;${this.compatible('transition')}: all ${duration}s ease-out;`
    }
    prepare(){
        let _this = this;
        this.el.forEach((item,index,arr)=>{
            let obj = {
                el: item,
                status: true,
                scrollEnd: null,
                value: item.getAttribute("data-rolling") || _this.value,
                string: item.getAttribute("data-rolling-string") || _this.string,
                duration: item.getAttribute("data-rolling-duration") * 1 || _this.duration,
                count: item.getAttribute("data-rolling-count") * 1 || _this.count
            }
            _this.creat(obj);
            _this.data.push(obj);
        })
    }
    creat(obj){
        let container = document.createDocumentFragment();
        let content = this.content(obj.string);
        obj.unit = [];
        obj.value.split('').forEach((n,i,v)=>{
            let digit = document.createElement('div');
            digit.className = 'data-rolling';
            digit.setAttribute('style', this.style(obj.duration));
            digit.innerHTML = (obj.string.includes(n) ? content : n);
            container.appendChild(digit);
            obj.unit.push({
                el: digit,
                value: n
            });
        })
        obj.el.innerHTML = '';
        obj.el.appendChild(container);
    }
    init(){
        this.prepare();
        this.scroll();
        return this
    }
    compatible(attr){
        let arr = ['webkit','moz','ms','o'],
            obj = document.body.style;
        if(attr in obj){
            return attr
        }else{
            for(let i in arr){
                let str = arr[i] + attr.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
                if(str in obj){
                    return str
                }
            }
        }
    }
    scroll(){
        let _this = this,
            attr = this.compatible('transform');
        let isEnd = '';
        let scroll = throttle(()=>{
            _this.data.forEach((item,index,arr)=>{
                let bounding = item.el.getBoundingClientRect();
                if(bounding.top <= window.innerHeight  && item.status && item.count > 0 && bounding.bottom > 0){
                    clearTimeout(item.scrollEnd);
                    item.status = false;
                    item.count -= 1;
                    item.count <= 0 && (isEnd += '.');
                    let len = item.string.length;
                    item.unit.forEach((n,i,v)=>{
                        let active = item.string.indexOf(n.value),
                            distance =  active / len;
                        n.el.style[attr] = `translateY(-${distance * 100}%)`;
                        n.el.childNodes[active] && n.el.childNodes[active].classList.add('active');
                        if(i === v.length - 1){
                            if(isEnd.length === arr.length){
                                window.removeEventListener('scroll',scroll);
                            }
                            item.scrollEnd = setTimeout(()=>{
                                // item.el.innerHTML = item.value;
                                _this.callback(item);
                            },item.duration * 1000 + 50)
                        }
                    })
                }
                if((bounding.bottom <= 0 || bounding.top >= window.innerHeight) && item.count > 0 && !item.status){
                    clearTimeout(item.scrollEnd);
                    item.status = true;
                    _this.creat(item);
                }
            })
        },50)
        window.addEventListener('scroll',scroll);
        scroll();
    }
}
